<template>
	<view class="talkpage">
		<view class="teambox">
			<view class="teamtop">
				<view class="doctorimg">
					<view class="num">
						5
					</view>
					<image src="https://changban.dianjingkeji.net/img/微信图片_20230817153730.jpg" mode=""></image>
				</view>
				<view class="doctorinfo">
					<view class="infotop">
						<view class="doctorname">
							王主任
						</view>
						<view class="doctortype">
							专家团队
						</view>
						<view class="teamtype">
							糖尿病
						</view>
					</view>
					<view class="‌hospitalname">
						河北医科大学第二医院
					</view>
					<view class="zhichengline">
						<view class="itemzhicheng">
							主任委员
						</view>
						<view class="itemzhicheng">
							主任医师
						</view>
					</view>
					
				</view>
				
			</view>
			<view class="teamtitle">
				团队成员
			</view>
			<view class="teamlist">
				<view class="iteminfo">
					<view class="teamimg">
						<view class="num">
							5
						</view>
						<image src="https://changban.dianjingkeji.net/img/微信图片_20230817153730.jpg" mode=""></image>
					</view>
					<view class="teamitemtype">
						家庭医生
					</view>
				</view>
				<view class="iteminfo">
					<view class="teamimg">
						<image src="https://changban.dianjingkeji.net/img/微信图片_20230817153730.jpg" mode=""></image>
					</view>
					<view class="teamitemtype">
						家庭医生
					</view>
				</view>
				<view class="iteminfo">
					<view class="teamimg">
						<image src="https://changban.dianjingkeji.net/img/微信图片_20230817153730.jpg" mode=""></image>
					</view>
					<view class="teamitemtype">
						家庭医生
					</view>
				</view>
				<view class="iteminfo">
					<view class="teamimg">
						<image src="https://changban.dianjingkeji.net/img/微信图片_20230817153730.jpg" mode=""></image>
					</view>
					<view class="teamitemtype">
						家庭医生
					</view>
				</view>
			</view>
		</view>
		<view class="listbox">
			<view class="item">
				<view class="avatarbox">
					<image src="https://changban.dianjingkeji.net/img/微信图片_20230817153730.jpg" mode=""></image>
				</view>
				<view class="right">
					<view class="name">
						王医生
					</view>
					<!-- <view class="content">
					  您好，有什么可以帮您的吗？
					</view> -->
					<view class="talkimg">
						<image src="https://changban.dianjingkeji.net/img/fd456a1456416.jpg" mode=""></image>
					</view>
				</view>
			</view>
			<view class="item1">
				<view class="right">
					<!-- <view class="content">
						糖尿病如何饮食调理
					</view> -->
					<view class="talkimg">
						<image src="https://changban.dianjingkeji.net/img/fd456a1456416.jpg" mode=""></image>
					</view>
				</view>
				<view class="avatarbox">
					<image src="https://changban.dianjingkeji.net/img/微信图片_20230817153730.jpg" mode=""></image>
				</view>
			</view>
		</view>
		<view class="talkline">
			<view class="maibox">
				<view class="iconfont icon-shengyinkai">
					
				</view>
			</view>
			<input type="text" placeholder="请输入.." />
			<view class="maibox">
				+
			</view>
		</view>
		<view class="bannerbox">
			<view class="itembanner">
				<view class="yuanbox">
					<view class="iconfont icon-post_pic">
						
					</view>
				</view>
				<view class="bannername">
					拍照
				</view>
			</view>
			<view class="itembanner">
				<view class="yuanbox">
					<view class="iconfont icon-tupian">
						
					</view>
				</view>
				<view class="bannername">
					上传图片
				</view>
			</view>
			<view class="itembanner">
				<view class="yuanbox">
					<view class="iconfont icon-wenjianjia">
						
					</view>
				</view>
				<view class="bannername">
					文件上传
				</view>
			</view>
			<view class="itembanner">
				<view class="yuanbox">
					<view class="iconfont icon-dianhua">
						
					</view>
				</view>
				<view class="bannername">
					语音通话
				</view>
			</view>
		</view>
		<view class="footline">
			<view class="iconbox" @click="winshow=true">
				<view class="iconfont icon-fenxiang1">
					
				</view>
				<view class="name" >
					分享
				</view>
			</view>
			<view class="iconbox" @click="goaddmember">
				<view class="iconfont icon-tianjiarenyuan">
					
				</view>
				<view class="name" >
					家庭成员
				</view>
			</view>
		
		
		</view>
		
		
		<view class="winpage" v-if="winshow">
			<view class="win">
				<view class="wintitle">
					分享给好友
					<view class="iconfont icon-guanbi" @click="winshow=false">
						
					</view>
				</view>
				<view class="cardbox">
					
					<image class="backimg" src="/static/image/banner-1-https://changban.dianjingkeji.net/img/banner-1-拷贝.jpg/banner-1-https://changban.dianjingkeji.net/img/banner-1-拷贝.jpg.jpg" mode=""></image>
					<view class="infobox">
						<view class="infotop">
							<image src="https://changban.dianjingkeji.net/img/微信图片_20230817153730.jpg" mode=""></image>
							<view class="namebox">
								<view class="name">
									王医生
								</view>
								<view class="zhichengline">
									<view class="itemzhicheng">
									主任医师
									</view>
								</view>
							</view>
						</view>
						<view class="keshi">
							内分泌科
						</view>
						<view class="hospitalname">
							河北医科大学第二医院
						</view>
					</view>
					<view class="titlebox">
						<view class="title">
							离院有人管
						</view>
						<view class="label">
							拍照上传病情资料，快速生成治疗与康复建议，条理清晰，告别困惑
						</view>
						<view class="title">
							离院有人管
						</view>
						<view class="label">
							拍照上传病情资料，快速生成治疗与康复建议，条理清晰，告别困惑
						</view>
					</view>
					<view class="sanline">
						<view class="left">
							<view class="label">
								长按/扫码关注
							</view>
							<view class="label">
								加入我的工作室体验健康管理服务
							</view>
						</view>
						<view class="right">
							
						</view>
					</view>
				</view>
				<view class="btnbox">
					<view class="itembtn">
						<view class="iconfont icon-weixin1 weixin">
							
						</view>
						<view class="btnname">
							微信
						</view>
					</view>
					<view class="itembtn">
						<view class="iconfont icon-xiazai xiazai">
							
						</view>
						<view class="btnname">
						保存
						</view>
					</view>
					<view class="itembtn">
						<view class="iconfont icon-QQ xiazai">
							
						</view>
						<view class="btnname">
							QQ
						</view>
					</view>
					<view class="itembtn">
						<view class="iconfont icon-lianjie lianjie">
							
						</view>
						<view class="btnname">
							链接
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				winshow:false
			}
		},
		methods: {
		goaddmember(){
			uni.navigateTo({
				url:'/pagesB/addmember/addmember'
			})
		},	
		}
	}
</script>

<style lang="less" scoped>
  .talkpage{
	  width: 750rpx;
	  box-sizing: border-box;
	   padding: 20rpx;
	  background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(255,255,255,0) 76%);
	  .teambox{
		  width:100%;
		  height: 400rpx;
		  background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(255,255,255,0) 76%);
		  box-sizing: border-box;
		  padding:30rpx 20rpx;
		  
		  .teamtop{
		  	width: 100%;
		  	display: flex;
		  	align-items: center;
		  	
		  	.doctorimg{
		  		width: 130rpx;
		  		height: 130rpx;
		  		border-radius: 50%;
		  		border: 2px solid white;
		  		
		  		position: relative;
		  		.num{
		  			width: 26rpx;
		  			height: 26rpx;
		  			color: white;
		  			font-size: 20rpx;
		  			box-sizing: border-box;
		  			text-align: center;
		  			line-height: 26rpx;
		  			background-color: red;
		  			position: absolute;
		  			border-radius: 50%;
		  			top: 0;
		  			right: 0rpx;
		  		}
		  		image{
		  			width: 100%;
		  			height: 100%;
		  			border-radius: 50%;
		  		}
		  	}
		  	.doctorinfo{
		  		flex: 1;
		  		margin-left: 20rpx;
		  		.infotop{
		  			display: flex;
		  			align-items: center;
		  			justify-content: space-between;
		  			line-height: 2;
		  			.doctorname{
		  				font-weight: bold;
		  			}
		  			.doctortype{
		  				width: 140rpx;
		  				height: 44rpx;
		  				text-align: center;
		  				line-height: 44rpx;
		  				border-radius: 8rpx;
		  				border: 1rpx solid #10CE00 ;
		  				color: #10CE00 ;
		  				font-size: 22rpx;
		  				font-weight: bold;
		  				background-color: #E1FFDF;
		  			}
		  			.teamtype{
		  				width: 120rpx;
		  				height: 44rpx;
		  				text-align: center;
		  				line-height: 44rpx;
		  				border-radius: 8rpx;
		  				color: #A7A7A7 ;
		  				font-size: 22rpx;
		  				font-weight: bold;
		  				background-color: #c7d3ff;
		  			}
		  		}
		  		.hospitalname{
		  			font-size: 30rpx;
		  			font-weight: bold;
		  			line-height: 2.5;
		  		}
		  		.zhichengline{
		  			flex:1;
		  			display: flex;
		  			align-items: center;
		  			.itemzhicheng{
		  				width: 110rpx;
		  				height: 44rpx;
		  				text-align: center;
		  				line-height: 44rpx;
		  				border-radius: 8rpx;
		  				font-size: 22rpx;
		  				color: #1a4f8a;
		  				background-color: #c7d3ff;
		  				margin-right: 14rpx;
		  			}
		  		}
		  		
		  	}
		  	
		  }
		  .teamtitle{
		  	font-weight: bold;
		  	font-size: 30rpx;
		  	line-height: 1.5;
		  	color: #6E6E6E ;
		  }
		  .teamlist{
		  	width: 100%;
		  	display: flex;
		  	align-items: center;
		  	margin-top: 20rpx;
		  	.iteminfo{
		  		margin: 0 20rpx;
		  		.teamimg{
		  			width: 90rpx;
		  			height: 90rpx;
		  			border-radius: 50%;
		  			position: relative;
		  			.num{
		  				width: 26rpx;
		  				height: 26rpx;
		  				color: white;
		  				font-size: 20rpx;
		  				box-sizing: border-box;
		  				text-align: center;
		  				line-height: 26rpx;
		  				background-color: red;
		  				position: absolute;
		  				border-radius: 50%;
		  				top: 0;
		  				right: 0rpx;
		  			}
		  			image{
		  				width: 100%;
		  				height: 100%;
		  				border-radius: 50%;
		  			}
		  			
		  		}
		  		.teamitemtype{
		  			font-size: 22rpx;
		  			color: #B2B2B2;
		  			text-align: center;
		  			margin-top: 10rpx;
		  		}
		  	}
		  }
	  }
	  .listbox{
	  		  width: 100%;
			  box-sizing: border-box;
			  padding: 20rpx;
			
			  height: 46vh;
	  		  .item{
	  			  width: 80%;
	  			  display: flex;
	  			  align-items: flex-start;
	  			  margin-top: 20rpx;
	  			  .avatarbox{
	  				  width: 100rpx;
	  				  height: 100rpx;
	  				  border-radius: 50%;
	  				  image{
	  					  width: 100%;
	  					  height: 100%;
	  					  border-radius: 50%;
	  				  }
	  			  }
	  			  .right{
	  				  width: 80%;
	  				  margin-left: 20rpx;
	  				  .content{
	  					  font-size: 28rpx;
	  					  font-weight: bold;
	  					  background-color: white;
	  					  border-radius: 14rpx;
	  					  padding: 20rpx;
	  				  }
					  .talkimg{
					  									  width: 250rpx;
					  									  height: 200rpx;
					  									  border-radius: 20rpx;
					  									  border: 10rpx solid white;
					  									  image{
					  										  width: 100%;
					  										  height: 100%;
					  										  border-radius: 20rpx;
					  									  }
					  }
	  			  }
	  		  }
	  		  .item1{
	  			 width: 80%;
	  			 display: flex;
	  			 align-items: flex-start;
	  			 margin-top: 20rpx; 
	  			 margin-left: 20%;
	  			 .avatarbox{
	  			 				  width: 100rpx;
	  			 				  height: 100rpx;
	  			 				  border-radius: 50%;
	  			 				  image{
	  			 					  width: 100%;
	  			 					  height: 100%;
	  			 					  border-radius: 50%;
	  			 				  }
	  			 }
	  			 .right{
	  			 				  width: 80%;
	  			 				  margin-right: 20rpx;
								  
	  			 				  .content{
	  			 					  font-size: 28rpx;
	  			 					  font-weight: bold;
	  			 					  background-color: #1a4f8a;
	  			 					  border-radius: 14rpx;
	  			 					  padding: 20rpx;
	  								  color: white;
	  								  
	  			 				  }
								  .talkimg{
									  width: 250rpx;
									  height: 200rpx;
									  border-radius: 20rpx;
									  margin-left: 100rpx;
									  border: 10rpx solid #1a4f8a;
									  image{
										  width: 100%;
										  height: 100%;
										  border-radius: 20rpx;
									  }
								  }
	  			 }
	  		  }
	  }
	  .talkline{
		  width: 100%;
		  background-color: white;
		  display: flex;
		  box-sizing: border-box;
		  padding: 10rpx 20rpx;
		  justify-content: space-between;
		  .maibox{
			  width: 80rpx;
			  height: 80rpx;
			  border-radius: 50%;
			  text-align: center;
			  line-height: 80rpx;
			  font-size: 40rpx;
			  background: linear-gradient( rgba(222,222,222,1) 0%,rgba(255,255,255,1) 100%);
			  .iconfont{
				  font-size: 40rpx;
				  font-weight: bold;
			  }
			  
		  }
		  input{
			  border: 0;
		  }
	  }
	  .bannerbox{
	  		width: 100%;
	  		display: flex;
	  		align-items: center;
	  		justify-content: space-evenly;
	  	
	  		.itembanner{
	  			width: 25%;
	  			text-align: center;
	  			.yuanbox{
	  				
	  				
	  				text-align: center;
	  				margin: auto;
	  				margin-bottom: 10rpx;
	  				line-height: 100rpx;
	  				.iconfont{
	  					font-size: 50rpx;
	  					color: #1a4f8a ;
	  				}
	  			}
	  		}
	  }
	  .footline{
	  		 width: 100%;
	  		 height: 120rpx;
	  		 background-color: white;
	  		 position: fixed;
	  		 left: 0;
	  		 bottom: 0;
	  		 display: flex;
	  		 align-items: center;
	  		 justify-content: space-evenly;
	  		 .iconbox{
	  			 text-align: center;
	  			 font-size: 28rpx;
	  			 .iconfont{
	  				 margin: auto;
	  				 font-size: 50rpx;
	  				 
	  			 }
	  		 }
	
	  }
	  .winpage{
	  		 width: 750rpx;
	  		 height: 100vh;
	  		 z-index: 99999;
	  		 background-color: rgba(0, 0, 0, 0.5);
	  		 position: fixed;
	  		 top: 0;
	  		 left: 0;
	  		 bottom: 0;
	  		 right: 0;
	  		 .win{
	  			 width: 100%;
	  			 height: 90%;
	  			 position: absolute;
	  			 top: 10vh;
	  			 bottom: 0;
	  			 left: 0;
	  			 right: 0;
	  			 background-color: #f1f1f1;
	  			 border-top-right-radius: 30rpx;
	  			 border-top-left-radius: 30rpx;
	  			 padding-top: 40rpx;
	  			 .wintitle{
	  				 width: 100%;
	  				 border-top: 1px solid #f1f1f1;
	  				 text-align: center;
	  				 position: relative;
	  				 padding-top: 10rpx;
	  				 .iconfont{
	  					 position: absolute;
	  					 top: 0;
	  					 right: 10rpx;
	  				 }
	  			 }
	  			 .cardbox{
	  				 width: 80%;
	  				 height: 60%;
	  				 margin: auto;
	  				 background-color: white;
	  				 margin-top: 20rpx;
	  				 border-radius: 30rpx;
	  				 position: relative;
	  				 .backimg{
	  					 width: 100%;
	  					 height: 30%;
	  					 border-top-right-radius: 30rpx;
	  					 border-top-left-radius: 30rpx;
	  				 }
	  				 .infobox{
	  					 position: absolute;
	  					 top: 0;
	  					 left: 0;
	  					 right: 0;
	  					 box-sizing: border-box;
	  					 padding: 20rpx;
	  					 color: white;
	  					 .infotop{
	  						display: flex;
	  						align-items: center; 
	  						image{
	  							width: 120rpx;
	  							height: 120rpx;
	  							border-radius: 50%;
	  						}
	  						.namebox{
	  							margin-left: 20rpx;
	  							.name{
	  								color: white;
	  							}
	  							.zhichengline{
	  								font-size: 24rpx;
	  								display: flex;
	  								align-items: center;
	  								margin-top: 6rpx;
	  								.itemzhicheng{
	  									padding: 4rpx 8rpx;
	  									background-color: #c88eff ;
	  									color: black;
	  								}
	  							}
	  						}
	  					 }
	  					
	  				 }
	  				 .titlebox{
	  					width: 100%;
	  					box-sizing: border-box;
	  					padding: 20rpx;
	  					line-height: 2;
	  					.title{
	  						background-color: #E5E5E5 ;
	  						color: #1a4f8a;
	  						max-width: 40%;
	  						text-align: center;
	  					}
	  					.label{
	  					font-size: 28rpx;
	  					line-height: 1.8;
	  					}
	  				 }
	  				 .sanline{
	  					 width: 100%;
	  					 display: flex;
	  					 justify-content: space-between;
	  					 align-items: center;
	  					 box-sizing: border-box;
	  					 padding: 20rpx;
	  					 .left{
	  						 margin-top: 20rpx;
	  						 font-size: 28rpx;
	  						 line-height: 2;
	  					 }
	  					 .right{
	  						 width: 150rpx;
	  						 height: 150rpx;
	  						 background-color: red;
	  					 }
	  				 }
	  			 }
	  			 .btnbox{
	  				 width: 100%;
	  				 height: 150rpx;
	  				 margin-top:30rpx;
	  				 display: flex;
	  				 align-items: center;
	  				 justify-content: space-evenly;
	  				 .itembtn{
	  					 width: 150rpx;
	  					 height: 150rpx;
	  					 border-radius: 30rpx;
	  					 background-color: white;
	  					 text-align: center;
	  					 box-sizing: border-box;
	  					 padding-top: 40rpx;
	  					.iconfont{
	  						 font-size: 44rpx;
	  					}
	  					.weixin{
	  						color: #40cf3f;
	  					}
	  					.xiazai{
	  						color: #0099ff;
	  					}
	  					.lianjie{
	  						color: #999999 ;
	  					}
	  				 }
	  			 }
	  		 }
	  }
  }
</style>
